<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>面向对象 Tab</title>
		<link rel="stylesheet" href="./styles/tab.css" />
		<link rel="stylesheet" href="./styles/style.css" />
	</head>

	<body>
		<main>
			<h4>Js 面向对象 动态添加标签页</h4>
			<div class="tabsbox" id="tab">
				<!-- tab 标签 -->
				<nav class="firstnav">
					<ul>
						<li class="liactive">
							<span>测试1</span><span class="iconfont icon-guanbi"></span>
						</li>
						<li>
							<span>测试2</span><span class="iconfont icon-guanbi"></span>
						</li>
						<li>
							<span>测试3</span><span class="iconfont icon-guanbi"></span>
						</li>
					</ul>
					<div class="tabadd">
						<span>+</span>
					</div>
				</nav>

				<!-- tab 内容 -->
				<div class="tabscon">
					<section class="conactive">测试1</section>
					<section>测试2</section>
					<section>测试3</section>
				</div>
			</div>
		</main>

		<script src="js/tab.js"></script>
	</body>
</html>
